﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <script src='@Url.Content("~/Scripts/zTree/js/jquery-1.4.4.min.js")' type="text/javascript"></script>
    <link href='@Url.Content("~/Scripts/zTree/css/zTreeStyle/zTreeStyle.css")' rel="stylesheet" type="text/css" />
    <script src='@Url.Content("~/Scripts/zTree/js/jquery.ztree.core-3.5.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/Scripts/zTree/js/jquery.ztree.excheck-3.5.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/Scripts/zTree/js/jquery.ztree.exedit-3.5.js")' type="text/javascript"></script>
    <style type="text/css">
        .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajaxSetup({ cache: false });
            $.fn.zTree.init($("#Tree"), setting, zNodes);
            $("#detail").hide();
        })
        var zNodes = [
        ];
        var qzNodes = [
        ];
        var qSetting = {
            async: {
                enable: true,
                url: "/Rule/getQuotas",
                type: "Get",
                dataType: "json",
                otherParam: { "id": function () { return $("#nodeID").val() } }
            },
            check: {
                enable: true
            },
            callback: {
                onAsyncSuccess: function (event, treeId, treeNode, msg) {
                    var treeObj = $.fn.zTree.getZTreeObj("qTree");
                    treeObj.setting.async.enable = false;
                },
                onAsyncError: function (event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
                    debugger;
                    alert("加载错误，请联系系统管理员！");
                },
                onCheck: function (event, treeId, treeNode) {
                }
            }
        };
        var setting = {
            async: {
                enable: true,
                url: "/Rule/getRules",
                type: "Get",
                dataType: "json"
            },
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom
            },
            edit: {
                enable: true,
                showRemoveBtn: true,
                showRenameBtn: false
            },
            data: {
                keep: {
                    parent: true,
                    leaf: true
                },
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onAsyncSuccess: function (event, treeId, treeNode, msg) {
                    var treeObj = $.fn.zTree.getZTreeObj("Tree");
                    treeObj.setting.async.enable = false;
                },
                onAsyncError: function (event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                },
                onClick: function (event, treeId, treeNode) {
                    $("#name").val(treeNode.name);
                    $("#remark").val(treeNode.tld);
                    $("#nodeID").val(treeNode.id);
                    $("#detail").hide(400);
                    $.fn.zTree.init($("#qTree"), qSetting, qzNodes);
                    $("#detail").show(400);
                },
                onRemove: function (event, treeId, treeNode) {
                    $.ajax({
                        type: "POST",
                        url: "/Rule/Delete",
                        data: { id: treeNode.id },
                        success: function () {
                            alert("删除成功！");
                        },
                        error: function (msg) {
                            alert(msg);
                        },
                        complete: function () {
                            $("#name").val("");
                            $("#remark").val("");
                            $("#nodeID").val("");
                            $("#detail").hide(400);
                        }
                    })
                }
            }
        };
        function UpdateNode() {
            var checkedIDs = "";
            var chknodes = $.fn.zTree.getZTreeObj("qTree").getCheckedNodes(true);
            for (var j = 0; j < chknodes.length; j++) {
                checkedIDs += chknodes[j].id + ",";
            }
            checkedIDs = checkedIDs.substr(0, checkedIDs.length - 1);
            var treeObj = $.fn.zTree.getZTreeObj("Tree");
            var node = treeObj.getNodeByParam("id", $("#nodeID").val(), null);
            node.name = $("#name").val();
            node.isParent = false;
            treeObj.updateNode(node);
            $.ajax({
                type: "POST",
                url: "/Rule/Opreate",
                data: { id: node.id, name: function () { return $("#name").val() }, remark: function () { return $("#remark").val() }, pId: node.pId, checkedIDs: checkedIDs },
                success: function () {
                    $.get("/Rule/getEntiyID", { name: function () { return $("#name").val() }, remark: function () { return $("#remark").val() } }, function (str) {
                        node.id = str.split(",")[0];
                        node.tld = str.split(",")[1];
                    })
                    treeObj.updateNode(node);
                    treeObj.refresh();
                    alert("操作成功！");
                },
                error: function (msg) {
                    debugger;
                    alert(msg);
                },
                complete: function () {
                    $("#name").val("");
                    $("#percentage").val("");
                    $("#nodeID").val("");
                    $("#detail").hide(400);
                }
            })
        }
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.id).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.id
				+ "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.id);
            if (btn) btn.bind("click", function () {
                var zTree = $.fn.zTree.getZTreeObj("Tree");
                zTree.addNodes(treeNode, { id: 0, pId: treeNode.id, name: "新增的指标，请点击此进行编辑", isParent: true });
                return false;
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.id).unbind().remove();
        };
        function addNewNode() {
            var treeObj = $.fn.zTree.getZTreeObj("Tree");
            var newNode = { id: 0, pid: null, name: "新增的指标，请点击此进行编辑", isParent: true };
            newNode = treeObj.addNodes(null, newNode);
        };
    </script>
</head>
<body>
    <a href="javascript:void(0);" onclick="addNewNode()">新增指标</a>
    <div>
        <div style="float: left; width: 250px;">
            <ul id="Tree" class="ztree">
            </ul>
        </div>
        <div id="detail" style="float: left;">
            <table>
                <tr>
                    <td>
                        指标名称
                    </td>
                    <td>
                        <input id="name" name="name" type="text" />
                    </td>
                </tr>
                <tr>
                    <td>
                        备注
                    </td>
                    <td>
                        <input id="remark" name="remark" type="text" />
                    </td>
                </tr>
            </table>
            <ul id="qTree" class="ztree">
            </ul>
            <input id="btnSure" type="button" value="确定" onclick="UpdateNode()" />
        </div>
    </div>
    <input type="hidden" id="nodeID" />
</body>
</html>
